<template>
  <div class="ly-main">
    <sec-form
      :searchBox="{ span: 6 }"
      :span="8"
      :ruleForm="ruleForm"
      :formData="formData"
      :optionData="optionData"
      @search="searchHandle"
      @reset="searchHandle"
    >
    </sec-form>
    <div class="user-manage">
      <div class="set-up">
        <el-button type="primary" icon="el-icon-plus" @click="createUserClick">创建用户</el-button>
      </div>
      <sec-table :loading="loading" :tableData="tableData" :tableCol="tableCol">
        <template v-slot:avatar="{ data }">
          <img class="avatar" :src="data.row.avatar" alt="" />
        </template>
      </sec-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>

    <el-drawer :title="title" :visible.sync="drawer" size="600px" append-to-body>
      <userDetail :data="selRow"></userDetail>
    </el-drawer>
    <el-dialog title="创建用户" :visible.sync="diaShow" width="50%" append-to-body>
      <createUser @cancel="diaShow = false" @confirm="addConfirm" v-if="diaShow"></createUser>
    </el-dialog>
  </div>
</template>
<script>
import { paginationMixin } from "@/mixins/pagination";
import createUser from "./components/createUser.vue";
import userDetail from "./detail.vue";
import { usersApi } from "api/app/userApi";
export default {
  name: "",
  mixins: [paginationMixin],
  props: {},
  components: { createUser, userDetail },
  computed: {},
  data() {
    return {
      drawer: false,
      loading: false,
      title: "详情",
      selRow: {},
      optionData: {
        isAdmin: this.$store.state.dict.whether,
        isActive: this.$store.state.dict.whether,
        role: this.$store.state.dict.role,
        // approvalStatus: this.$store.state.dict.status.slice(0, 2),
      },
      ruleForm: {
        approvalName: "",
        approvalCompany: "",
        phone: "",
        role: "",
        approvalEmail: "",
        approvalStatus: "",
        isActive: null,
        isAdmin: null,
      },
      tableData: [],
      diaShow: false,
    };
  },
  created() {
    this.formData = [
      { type: "text", label: "姓名", prop: "approvalName" },
      { type: "text", label: "公司名称", prop: "approvalCompany" },
      { type: "text", label: "手机号", prop: "phone" },
      { type: "select", label: "角色", prop: "role" },
      { type: "text", label: "邮箱", prop: "approvalEmail" },
      // { type: "select", label: "审核状态", prop: "approvalStatus" },
      { type: "select", label: "是否激活", prop: "isActive" },
      { type: "select", label: "是否管理员", prop: "isAdmin" },
      { type: "datetimerange", label: "申请日期", prop: "date", span: 8 },
    ];
    this.tableCol = [
      { label: "姓名", prop: "name" },
      { label: "昵称", prop: "nickname" },
      {
        label: "角色",
        prop: "role",
        formatter: (data) => {
          return this.utils.getDictLabel("role", data.role);
        },
      },
      { label: "公司名称", prop: "company" },
      { type: "slot", label: "头像", prop: "avatar" },
      { label: "手机号", prop: "phone" },
      { label: "邮箱", prop: "email" },
      {
        type: "status",
        label: "状态",
        prop: "status",
        statusClass: ({ row }) => {
          let status = {
            fail: "error",
            // 已终止: "warning",
            wait: "pending-ani",
            pass: "success",
          };
          return status[row.status] || "icon-empty";
        },
        formatter: ({ $index, column, row }) => {
          return this.utils.getDictLabel("status", row.status);
        },
      },
      {
        label: "是否激活",
        prop: "isActive",
        formatter: (data) => {
          return this.utils.getDictLabel("whether", data.isActive);
        },
      },
      {
        label: "是否管理员",
        prop: "isAdmin",
        width: 100,
        formatter: (data) => {
          return this.utils.getDictLabel("whether", data.isAdmin);
        },
      },
      { label: "申请时间", prop: "submittedAt", width: 160 },
      { label: "审批完成时间", prop: "updatedAt", width: 160 },
      // {
      //   type: "operation",
      //   label: "操作",
      //   children: [
      //     {
      //       label: "详情",
      //       icon: "el-icon-view",
      //       click: ({ row }) => {
      //         this.drawer = true;
      //         this.selRow = row;
      //       },
      //     },
      //   ],
      // },
    ];
  },
  mounted() {
    this.initPage();
  },
  methods: {
    addConfirm() {
      this.diaShow = false;
      this.initPage();
    },
    createUserClick() {
      this.diaShow = true;
    },
    searchHandle() {
      this.page = 1;
      this.initPage();
    },
    initPage() {
      this.loading = true;
      console.log("this.ruleForm", this.ruleForm);
      let { date } = this.ruleForm;

      let submittedAtStart = date?.[0] || "";
      let submittedAtEnd = date?.[1] || "";
      usersApi({
        ...this.ruleForm,
        submittedAtStart,
        submittedAtEnd,
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.loading = false;
        this.tableData = [];
        let { data, total } = res.data;
        data.forEach((item) => {
          this.tableData.push({ ...item, ...item.approvalRequest, ...item.approvalResponse });
        });
        this.totalSize = total;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initPage();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initPage();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.set-up {
  // text-align: right;
  margin-bottom: 10px;
}
.avatar {
  width: 40px;
}
</style>
